<!-- @file 移动端观看页 -->
<template>
  <div class="c-mobile-watch">
    <!-- 观看页主体布局 -->
    <mobile-watch-layout />

    <!-- 观看页全局弹出层组件-延迟加载 -->
    <mobile-watch-layout-lazyload v-if="layoutLoaded" />
  </div>
</template>

<script setup lang="ts">
import { defineAsyncComponent } from 'vue';
import MobileWatchLayout from './layout/mobile-watch-layout.vue';

import { usePvTrack } from '@/hooks/business/use-pv-track';
import { useWatchPage } from '@/pages/watch/_hooks/use-watch-page';
import { useLayoutLoad } from '@/hooks/core/use-layout-load';

const MobileWatchLayoutLazyload = defineAsyncComponent(
  () =>
    import(
      /* webpackChunkName: "mobile-watch-layout-lazyload" */ './layout/mobile-watch-layout-lazyload.vue'
    ),
);

useWatchPage();

usePvTrack('saas-web-watch-mobile');

const { layoutLoaded } = useLayoutLoad('mobile-watch');
</script>

<style lang="scss">
.c-mobile-watch {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>
